<template>
  <div class="layoutSidebar">
    <div class="layoutSidebar_hd">
      <span class="layoutSidebar_hd_title">病患分布</span>
    </div>
    <div class="layoutSidebar_bd">
      <AreaTree class="layoutSidebar_bd_tree" :isShowSearch="true" @nodeClick="treeNnodeClick"></AreaTree>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import Autocomplete from '@/components/common/Autocomplete.vue';
import AreaTree from '@/components/common/AreaTree.vue';
import MapCommon from '@/util/MapCommon';
import PopBhDetail from '@/components/common/gisPop/PopBhDetail.vue';

@Component({
  name: 'BhfbSidebar',
  components: {
    Autocomplete,
    AreaTree,
    PopBhDetail
  },
  mixins: [MapCommon] // GIS 将地图解析方法混入当前组件
})
export default class BhfbSidebar extends Vue {
  private MapComp: any = null;
  private mounted() {
    (this as any).resolveMap('map').then(() => {
      this.MapComp = this.getComponent();
      // this.$store.dispatch('BhfbModule/bhfbMapEmit', this.MapComp);
      // this.MapComp.on('popup', this.onPuppup, this);
      // this.MapComp.load();
    });
  }
  private treeNnodeClick(data: any, checked: any, indeterminate: any) {
    this.MapComp.panTo(data.level, data.location);
  }
  // 获取地图功能
  private getComponent() {
    const self: any = this;
    const modules = self.$ioc.resolve('GISModules-map');
    const component = modules.eventSituation.getComponent('sicknessDistribute');
    return component;
  }

  private onPuppup(data: any) {
    const self = this;
    const $vm: any = {
      el: '#' + data.containerId,
      data() {
        return {
          popData: data.data
        };
      },
      methods: {
        closeDetailPop() {
          self.MapComp.closePopup();
        }
      },
    };
    const temp: any = new PopBhDetail($vm);
  }
}
</script>
<style lang="less" scoped>
@import url('../../../assets/css/LayoutSidebar.less');
</style>
